import React, { useEffect, useRef, useState } from 'react'
import { Swiper, Toast, NavBar } from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate, useParams } from 'react-router-dom'
import { getRecommend, getAddCart } from '../../api'
import './car.scss'
import { Empty, Button,Radio, ActionBar, SwipeCell,Flex, Typography, Image,Checkbox   } from 'react-vant';
import { useSelector } from 'react-redux'

export default function Car() {
  const [checkAll, setCheckAll] = useState(['a'])
  let navigate = useNavigate()
  let [recommendList, setRecommendList] = useState([])
  let userid = useSelector(state=>state.user.userId)
  let {proid} = useParams()
  let [num,setNum] = useState(1)
  const back = () => {
    navigate(-1)
  }

  useEffect(() => {
    getRecommend({ count: 1, limitNum: 12 }).then((res) => {  // 秒杀
      console.log(res);
      setRecommendList(res.data.data)
    })
    getAddCart({userid,proid,num:'1'}).then((res)=>{
      console.log(res);
    })
  }, [])

  const setChecked = () =>{
    console.log('点击了');
  }
 
  return (
    <div>
      <div className='navCar' title='自定义返回按钮图标' padding='0'>
        <NavBar back='返回'
          backArrow={<LeftOutline />}
          style={{ color: "#1989fa", height: '46px' }}
          onBack={back}>
          <span style={{ color: '#000' }}>购物车(0)</span>
        </NavBar>
      </div>

      <div>
        <SwipeCell
            rightAction={
              <Button style={{ height: '100%' }} square type="danger">
                删除
              </Button>
            }
          >
           
           
          <Flex className="demo-product-card" align="stretch">
            <Checkbox name='a' />
            <Image src="https://img.yzcdn.cn/vant/ipad.jpeg" className="demo-product-card__img" />
            <Flex direction="column" justify="between" className="demo-product-card__content">
              <div>
                <Typography.Title level={5}>商品标题</Typography.Title>
                <Typography.Text type="secondary">这里是商品描述</Typography.Text>
              </div>
              <Flex justify="between" align="center">
                <Typography.Text strong size="lg">
                  ¥2.00
                </Typography.Text>
                <Typography.Text size="sm" type="secondary">
                  x2
                </Typography.Text>
              </Flex>
            </Flex>
          </Flex>
        </SwipeCell>
      </div>

      <ActionBar className='demo-action-bar'>
        <Radio.Group defaultValue="1">
        <Checkbox.Group  value={checkAll} onChange={setCheckAll}>
            <Checkbox name='a'>全选</Checkbox>
          </Checkbox.Group>
        </Radio.Group>
        <ActionBar.Icon  badge={false}>合计</ActionBar.Icon>
          <ActionBar.Button 
            type='danger'
            text='立即购买'
            onClick={() => console.log('button click')}
          />
        </ActionBar>

      
      {/* 购物车无内容 */}
      <div className='carNoContent'>
        <Empty description="购物车空空如也" >
          <Button type='primary' block round>
            立即购物
          </Button>
        </Empty>
        <p>可能你还想要</p>
      </div>

      <ul className='recommend'>
        {
          recommendList.map((item) => {
            return <li key={item.proid}>
              <div className='carImg_box'><img src={item.img1} /></div>
              <h4>{item.proname}</h4>
              <h2>&yen;{item.originprice}</h2>
            </li>
          })
        }
      </ul>
    </div>
  )
}
